I'm working on a flutter web application and I'm using GoogleMap widget. There are several interaction modes (gestureHandling) that google makes available in the JavaScript version (Interaction doc).
By default, the map is in "greedy" mode, but when I resize the internet browser, it goes into "cooperative" mode ... and at this time, when I want to zoom on my map, I have to maintain CTRL key and i dont't like it at all.
It show me : "Use ctrl + scroll to zoom the map".
So in my project I want to set the map in the "greedy" interaction mode, but the GoogleMap widget doesn't have any parameter for doing it.
I found an alternative solution which consists of going through JavaScript to programmatically press the CTRL button when there is an action of the wheel on the map.
<!-- In web/index.html -->
<!-- ... -->
<head>
<!-- ... -->
<script src="script.js" defer></script>
<!-- ... -->
</head>
<!-- ... -->
// In web/script.js
function initScrollListener(id) {
try {
var map = document.getElementById('plugins.flutter.io/google_maps_' + id);
map.addEventListener('wheel', wheelEvent, true);
} catch (error) {
console.error(error);
}
}
function wheelEvent(event) {
Object.defineProperty(event, 'ctrlKey', { value: true });
}
// In lib/main.dart (or anywhere in your project)
import 'dart:js' as js;
import 'package:flutter/foundation.dart';
//... in my widget ...//
@override
Widget build(BuildContext context) {
return GoogleMap(
//...//
onMapCreated: (GoogleMapController controller) {
//Call the JavaScript function
if(kIsWeb) js.context.callMethod('initScrollListener', [controller.mapId]);
},
);
}
//...//
It works pretty well, but I'm not too confident about this solution.
I'm now trying to find a way to retrieve the google.maps.Map instance, and attempt to manualy set the "greedy" interaction mode onto it.
If you have any suggest ^^ Thanks !
related resources: